<template>
	<view class="refreshPage">
		<a-refresh @stateChage="stateChage">
			<view class="refresh-moudle">
				<view class="dropDown">
					<view class="thumbnail">
						<image class="img" src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimg.jj20.com%2Fup%2Fallimg%2F4k%2Fs%2F02%2F2109242306111155-0-lp.jpg&refer=http%3A%2F%2Fimg.jj20.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1648713987&t=5fae74e4286c7768699722fc41c2a824" mode="widthFix"></image>
					</view>
					<view class="refresh-text" v-if="dropDownState === 1 || dropDownState === 2">
						<text :class="dropDownState === 2 ? 'freed' : ''">></text>
						<text class="text">{{dropDownState === 1 ? '下拉查看更多' : '释放查看更多'}}</text>
					</view>
					<view class="refresh-text" v-else>拼命加载中···</view>
				</view>
			</view>

			<template v-slot:page>
				<view class="page">
					
					<view class="word">
						<map id="map" :style="{height:imageHeight+'px',width:imageWinth+'px'}" class="map"
							:longitude="longitude" :latitude="latitude" :markers="cover" :circles="circles"
							:enable-zoom="false" :enable-scroll="false" :scale="scale">
							<cover-view style='width:100%;height:100%'></cover-view>
						</map>
					</view>
				</view>
			</template >
		</a-refresh>
	</view>
</template>

<script>
	import amap from '../../common/amap-wx.js';
	export default {
		props: {
			scale: {
				type: Number,
				default: 16
			}
		},
		data() {
			return {
				dropDownState: 1, // 显示1:初始状态, 2:跳转, 3:刷新中
				
				/* 地图 */
				map: null,
				mapHeight: 1334,
				// 屏幕高度
				screenHeight: 667,
				latitude: 34.747018,
				longitude: 113.61936,
				polylines: [],
				covers: [{
					latitude: 0,
					longitude: 0,
					iconPath: '/static/location.png',
					width: 150,
					height: 200
				}],
				
				
				cover: [{
					latitude: 34.747018,
					longitude: 113.61936,
					// #ifdef APP-PLUS
					iconPath: '../',
					// #endif
					// #ifndef APP-PLUS
					iconPath: '/static/label.png',
					// #endif
				}, {
					latitude: 35.747018,
					longitude: 113.61936,
					// #ifdef APP-PLUS
					iconPath: '/static/label.png',
					// #endif
					// #ifndef APP-PLUS
					iconPath: '/static/label.png',
					// #endif
				}],
				circles: [{
					latitude: 34.747018,
					longitude: 113.61936,
					color: '#0000004D',
					fillColor: '#00000001',
					radius: 600,
					strokeWidth: 300,
				
				}],
				imageHeight: '',
				imageWinth: '',
			}
		},
		mounted () {
			this.imageHeight = this.getHeigh();
			this.imageWinth = this.getWinth();
			console.log(this.imageWinth)
			
			this.$nextTick(() => {
				
				this._mapContext = uni.createMapContext('map', this)
				this._mapContext.initMarkerCluster({
					enableDefaultStyle: false,
					zoomOnClick: true,
					gridSize: 60,
					complete(res) {
					  console.log('initMarkerCluster', res)
					}
				  });
			
				  this._mapContext.on("markerClusterCreate", (e) => {
					console.log("markerClusterCreate", e);
				  });
			})
		
			console.log(123);
			const that = this;
		
			// 使用高的API获取当前位置
			// #ifdef MP-WEIXIN
			let amapPlugin = new amap.AMapWX({  
				key: '52a2112b30f51391813d5a8edd427d78'
			});
			
			amapPlugin.getRegeo({
				success: (data) => {
					let addressComponent = data[0].regeocodeData.addressComponent
					that.district = addressComponent.district;
					getApp({allowDefault: true}).globalData.address = addressComponent.district;
					this.area = addressComponent.province + addressComponent.city + addressComponent.district; 
					this.getData();
				},
				fail: function(info){
					//失败回调 
					console.log('位置获取失败')
				}
			});
			// #endif
			
			console.log(55555);
			// 获取位置信息
			uni.getLocation({
				type: 'gcj02',
				geocode: true,
				success: function (res) {
					console.log('res', res);
					that.longitude = res.longitude
					that.latitude = res.latitude
					// that.latitude2 = res.latitude - 0.0008
					that.covers[0].longitude = res.longitude
					that.covers[0].latitude = res.latitude
					that.circles[0].longitude = res.longitude
					that.circles[0].latitude = res.latitude
					//当前登录用户的全局经纬度
					uni.setStorageSync('longitude',res.longitude);
					getApp({allowDefault: true}).globalData.longitude = res.longitude;
					uni.setStorageSync('latitude',res.latitude);
					getApp({allowDefault: true}).globalData.latitude = res.latitude;
					
					// #ifdef APP-PLUS
					that.district = res.address.district
					// #endif
				},
				fail: (err) => {
					console.log(err);
				}
			});
			
			// #ifdef H5
			let user_token = uni.getStorageSync('user_token');
			if(user_token){
				console.log('已登录');
				this.is_login = 1;
			}else{
				this.is_login = 2;
				console.log('未登录');
			}
			// #endif
		},
		methods: {
			getHeigh() {
				var result = 0;
				uni.getSystemInfo({
					success(res) {
						result = res.windowHeight-100
			
					}
				})
				return result;
			},
			getWinth() {
				var width = 0;
				uni.getSystemInfo({
					success(res) {
						width = res.windowWidth
			
					}
				})
				return width;
			},
			
			stateChage (state) {
				if (this.dropDownState === state) return false
				
				console.log(state);
				this.dropDownState = state
				
				
				if(state == 4){
					uni.navigateTo({
						url:'/pages/goods/home',
						animationType: 'slide-in-top',
						animationDuration: 1000
					})
				}
			}
		}
	}
</script>

<style lang="scss">
.refreshPage {
	min-height: 100%;
	.refresh-moudle {
		text-align: center;
		.dropDown {
			color: black;
			position: relative;
			.thumbnail {
				.img {
					width: 750rpx;
				}
			}
			.refresh-text {
				position: absolute;
				left: 0;
				right: 0;
				bottom: 20rpx;
				font-size: 28rpx;
			}
			.icon {
				transition: transform .2s linear;
				&.freed {
					transform: rotate(180deg);
				}
			}
			.text {
				margin-left: 12rpx;
			}
		}
	}
	.page {
		height: 300vh;
	}
}
</style>
